<template>
	<div class="panel-container">
		<panelTitle
			title="今日场内数据看板"
			sub-title="TODAY'S ON-SITE DATA DASHBOARD"
      :bg-type="2"
		></panelTitle>

		<div class="panel-content">
      <todayInfo></todayInfo>

      <div class="outer-title-box">
        <panelTitle title="7日进场客流趋势">
          <div class="raido-group">
            <input type="radio" :value="1" v-model="personType" name="persontype" id="p1"><label for="p1" class="group-1">访客</label>
            <input type="radio" :value="2" v-model="personType" name="persontype" id="p2"><label for="p2">员工</label>
          </div>

        </panelTitle>
      </div>

      <lineChat></lineChat>
    </div>
	</div>
</template>

<script setup name="today-data-board">
// 今日场内数据看板
import { ref } from 'vue'

import panelTitle from '../panel-title/index.vue'
import todayInfo from './component/today-info.vue'
import lineChat from './component/line-chat.vue'

const personType = ref(1)
</script>

<style lang="scss" scoped>
.panel-container {
	margin-top: 1.25vw;
}

.panel-content {
  width: 100%;
	// width: 912px;
	height: 29.270833vw;

	box-sizing: border-box;
	background: linear-gradient(
		360deg,
		rgba(56, 185, 255, 0.16) 0%,
		rgba(56, 185, 255, 0) 100%
	);
	border: 1px solid;
	border-image: linear-gradient(
			360deg,
			rgba(56.000000461936, 185.00000417232513, 255, 1),
			rgba(56.000000461936, 185.00000417232513, 255, 0.11999999731779099)
		)
		1 1;

	border-top: none;
}

.outer-title-box {
  padding-left: 1.041667vw;
  padding-right: 0.833333vw;
  box-sizing: border-box;

  :deep(.panel-title) {
    padding-left: 2.5vw;
  }
}

.raido-group {
  margin-right: 1.302083vw;

  display: flex;
  align-items: baseline;

  label {
    margin-left: 0.416667vw;
  }

  .group-1 {
    margin-right: 1.25vw;
  }
}
</style>
